<template>
    <div>
       <h3>分页显示房价信息</h3>
        <input type="button" value="价格降序" v-bind:class="page.solt">
        <input type="button" value="价格升序" v-bind:class="page.solt" >
        <br>
        <a href="https://localhost:7200/api/RoomPrice/ExProxlsx">导出房价信息</a>
       <table class="table">
           <thead>
               <tr>
                <th>编号</th>
                <th>标题</th>
                <th>房价</th>
                <th>房型</th>
                <th>描述</th>
                <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for="d in showdata">
                <td>{{ d.roomPriceId }}</td>
                <td>{{ d.roomPriceTitle }}</td>
                <td>{{ d.roomPriceNum.toFixed(2) }}</td>
                <td>{{ d.roomTypeName }}</td>
                <td>{{ d.roomPriceInfo }}</td>
                <td>
                    <input type="button" value="修改" @click="jumpupd(d.roomTypeId)">
                </td>
               </tr>
           </tbody>
       </table>
       共{{ sum.count }}行
         共{{ sum.pagecount }}页
         每页{{ page.size }}条
         当前第{{ page.index }}页
         <input type="button" value="首页" @click="index(1)">
         <input type="button" value="上一页" @click="index(2)">
         <input type="button" v-for="d in sum.pagecount" :value="d" @click="updindex(d)">
         <input type="button" value="下一页" @click="index(3)">
         <input type="button" value="尾页" @click="index(4)">

         <input type="number" v-model="page.index">
         <input type="button" value="跳转" @click="jumpindex">
         每页显示
         <select v-model="page.size" @change="updsize">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
         </select>条
         <br>   
         <a href="/showall">返回首页</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()

onMounted(()=>{
    showprice()
})
const jumpupd=(uid:number)=>{
    router.push({path:'/updprice',query:{id:uid}})
}

//分页+查询条件
const page=ref({
    index:1,
    size:2,
    solt:0
})
//总
const sum=ref({
    count:0,
    pagecount:0
})
const showdata=ref([{
     "roomPriceId": 1,
      "roomPriceTitle": "经济舒适",
      "roomPriceNum": 199,
      "roomstypesId": 1,
      "roomPriceInfo": "无",
      "solt": 0,
      "roomTypeId": 1,
      "roomTypeName": "单人房"
}])
//显示房价
const showprice=()=>{
    axios.get('/api/RoomPrice/ShowPrice',{params:page.value}).then(res=>{
    showdata.value=res.data.data
    //showdata.value=res.data.linq
    sum.value.count=res.data.count
    sum.value.pagecount=Math.ceil(sum.value.count/page.value.size)
    
    })
}

//分页
const index=(val:number)=>{
    if(val==1)
{
    page.value.index=1
    showprice()
}
 if(val==2&&page.value.index>1)
{
    page.value.index--
    showprice()
}
if(val==3&&page.value.index<sum.value.pagecount)
{
    page.value.index++
    showprice()
}
 if(val==4)
{
    page.value.index=sum.value.pagecount
    showprice()
}
}
const updindex=(val:number)=>{
    page.value.index=val
    showprice()
}
const jumpindex=()=>{
    if(page.value.index<1||page.value.index>sum.value.pagecount)
{
    alert('页码超出范围')
    page.value.index=1
}
showprice()
}
const updsize=()=>{
    page.value.index=1
    showprice()
}
</script>

<style scoped>

</style>